<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>备件管理系统 - 供应商管理</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/element-plus"></script>
  <script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.min.js"></script>
  <style>
    .el-table__header th {
      background-color: #e1dddd !important;
    }
  </style>
</head>
<body>
<div id="app">
  <!-- 页面头部 -->
  <header class="header">
    <h2 style="margin: 0;">供应商管理</h2>
  </header>

  <!-- 主体内容 -->
  <main>
    <!-- 退出按钮 -->
    <div style="text-align: right;">
      <el-button type="info" size="small" @click="logout">退出</el-button>
    </div>

    <!-- 搜索与新增按钮 -->
    <div style="margin-bottom: 10px; display: flex; justify-content: space-between;">
      <el-button type="primary" size="medium" @click="showAddDialog = true">新增供应商</el-button>
      <el-input v-model="searchQuery" placeholder="请输入供应商编号或名称" style="width: 200px;"></el-input>
    </div>

    <!-- 表格 -->
    <el-table :data="paginatedSuppliers" border style="width: 100%">
      <el-table-column prop="index" label="序号"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="contactPeople" label="联系人"></el-table-column>
      <el-table-column prop="contactPhone" label="联系方式"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="mini" type="primary" icon="EditPen" @click="editSupplier(scope.row)" style="margin-right: 5px;">编辑</el-button>
          <el-button size="mini" type="danger" icon="Delete" @click="deleteSupplier(scope.row.supplierid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
            layout="prev, pager, next"
            :total="computedSuppliers.length"
            v-model:current-page="currentPage"
            :page-size="pageSize"
            style="margin-top: 20px; justify-content: center;">
    </el-pagination>

    <!-- 新增/编辑弹窗 -->
    <el-dialog v-model="showAddDialog" title="新增供应商" width="30%">
      <el-form :model="newSupplier" label-position="left" label-width="100px">
        <el-form-item label="名称">
          <el-input v-model="newSupplier.name"></el-input>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input v-model="newSupplier.contactPeople"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="newSupplier.contactPhone"></el-input>
        </el-form-item>
        <div style="text-align: right;">
          <el-button @click="cancelAdd">取消</el-button>
          <el-button type="primary" @click="addSupplier">提交</el-button>
        </div>
      </el-form>
    </el-dialog>
  </main>

  <!-- 底部 -->
  <footer class="footer">
    &copy; 2025 备件管理系统 - 版权所有
  </footer>
</div>

<script>
  const { createApp } = Vue;
  const apiClient = axios.create({
    //本机地址
    //baseURL: 'http://localhost:8086',
    //服务器 地址
    baseURL: 'http://8.137.85.243:8086',
    timeout: 5000
  });

  const app = createApp({
    data() {
      return {
        suppliers: [],
        newSupplier: { name: '', contactPeople: '', contactPhone: '' },
        searchQuery: '',
        showAddDialog: false,
        currentPage: 1,
        pageSize: 10
      };
    },
    computed: {
      computedSuppliers() {
        return this.suppliers
                .filter(supplier =>
                        (supplier.name && supplier.name.toLowerCase().includes(this.searchQuery.toLowerCase())) ||
                        (supplier.supplierid && supplier.supplierid.toString().includes(this.searchQuery.toLowerCase()))
                )
                .map((supplier, index) => ({
                  index: index + 1,
                  supplierid: supplier.supplierid,
                  name: supplier.name,
                  contactPeople: supplier.contactPeople,
                  contactPhone: supplier.contactPhone
                }));
      },
      paginatedSuppliers() {
        const start = (this.currentPage - 1) * this.pageSize;
        const end = start + this.pageSize;
        return this.computedSuppliers.slice(start, end);
      }
    },
    mounted() {
      this.loadSuppliers();
    },
    methods: {
      async loadSuppliers() {
        try {
          const res = await apiClient.get('/api/suppliers/listall');
          console.log('接口返回数据:', res.data); // 打印数据结构
          if (Array.isArray(res.data)) {
            this.suppliers = res.data;
          } else if (res.data && Array.isArray(res.data.suppliers)) {
            this.suppliers = res.data.suppliers;
          } else {
            this.suppliers = [];
          }
        } catch (error) {
          alert('数据加载失败: ' + error.message);
          this.suppliers = [];
        }
      },
      editSupplier(supplier) {
        this.newSupplier = {
          supplierid: supplier.supplierid,
          name: supplier.name,
          contactPeople: supplier.contactPeople,
          contactPhone: supplier.contactPhone
        };
        this.showAddDialog = true;
      },
      async addSupplier() {
        if (!this.newSupplier.name || !this.newSupplier.contactPeople || !this.newSupplier.contactPhone) {
          alert('请填写完整信息');
          return;
        }
        if (this.newSupplier.supplierid) {
          await apiClient.put(`/api/suppliers/update/${this.newSupplier.supplierid}`, this.newSupplier);
        } else {
          await apiClient.post('/api/suppliers/insert', this.newSupplier);
        }
        this.newSupplier = { name: '', contactPeople: '', contactPhone: '' };
        this.showAddDialog = false;
        this.loadSuppliers();
      },
      cancelAdd() {
        this.newSupplier = { name: '', contactPeople: '', contactPhone: '' };
        this.showAddDialog = false;
      },
      async deleteSupplier(supplierid) {
        if (!confirm('确定删除？')) return;
        await apiClient.delete(`/api/suppliers/delete/${supplierid}`);
        this.loadSuppliers();
      },
      logout() {
        window.location.href = '/dashboard.html';
      }
    }
  });

  app.use(ElementPlus);

  const { EditPen, Delete } = ElementPlusIconsVue;
  app.component('EditPen', EditPen);
  app.component('Delete', Delete);

  app.mount('#app');
</script>
</body>
</html>
